<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<link href="../css/common.css" rel="stylesheet">
<script type="text/javascript" src="../yibiao/jquery-1.8.3.min.js"></script>
<!--<script src="../yibiao/exporting.js"></script>-->
<script src="../yibiao/highcharts.js"></script>
<script src="../yibiao/yemian.js"></script>
<link href="../yibiao/ext4.2/ext4.2/resources/css/ext-all-neptune.css" rel="stylesheet">
    <link  rel="stylesheet"  href="../yibiao/style.css"/>
	<!--<link rel="stylesheet" href="yibiao/content.css" />-->
    <script src="../yibiao/ext4.2/ext4.2/ext-all.js" type="text/javascript"></script>
    <script type="text/javascript" src="../yibiao/ext4.2/ext4.2/locale/ext-lang-zh_CN.js"></script>
   <script type="text/javascript" src="../yibiao/echarts-all.js"></script>
   <script type="text/javascript" src="../yibiao/index.js"></script>
   <style>
   li{ list-style:none;}ul{ list-style:none;}
   div#chart-body {
    margin-top: 55px;
}
.chaxundas{ height:60px; background:#063741; margin:0 auto;overflow: hidden;}
.chaxundas li{ float:left; text-align:center; font-size:14px; color:#ffffff;height:35px; width:10%; margin-top:11px;}
.chaxundas li p{ float:left; line-height:8px;}
.chaxundas li span{ margin-left:5px;padding: 5px 10px 5px 10px;}
.chaxundas li input{ width: 78%; height:35px; border-radius:5px; border:0px; padding-left:5px; float:left; opacity:1; margin-right:10px;}
.chaxundas li select{width:50%; height:35px; border-radius:5px; border:0px; padding-left:6px; float:left}

.demo0{position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999; margin:0 auto;}
.big4{  float:left; position:absolute; width:100%;
    top: 365px;
}}
.subnav1{ width:100%; height:40px;    background: #063f4a;}
.subnav1 li{ float:left; width:100px;height:30px; margin-top:10px; background:url(../images/3.gif) repeat-x; line-height:30px; text-align:center; color:#9bc1ce;  cursor:pointer; background:#0a2a3a;    margin-left: 5px; border-top-left-radius: 10px; border-top-right-radius: 10px;}
	
	.all{ width:100%; height:auto; /*overflow-y:auto*/}
.active1{background:#084756!important; color:#ffffff !important;   }
.subnav1 li a{ color:#000; font-size:15px; font-weight:bold; margin-left:20px;}
.subnav-neirong1{   margin-top:10px;}

.erbox{ width:100%; float:left;}
.xiala{ margin-left:40px;}

.lie1{background:#063a46; font-size:13px; width:100%; color:#b2d6e0; float:left; height:400px;/*   overflow: scroll;*/}
.lie1 ul{  background:#063a46; height:39px;color:#b2d6e0; padding-left:48px; line-height:39px; margin:0;}
.lie1 ul li{ line-height:39px; float:left; font-size:14px; text-align:center; width:32%; color:#b1d6e0;}
.lie1 ul li p{ font-size:14px; color:#b1d6e0; float:left; margin:0;}
.lie1 ul li span{ color:#ffffff; float:left}
.lie1 ul:nth-child(odd){ background-color:053744}
.lie1 ul:nth-child(even){ background:#05323e;}
#ext-gen1018{overflow-y:auto !important; overflow-x:hidden !important}
.lixian{    background: #888888;color: #bbbbbb; width:50px; height:25px; border-radius:4px; text-align:center;}
.zaixian{    background:#56d753;color: #000000; width:50px; height:25px; border-radius:4px; text-align:center;}
.guzhang{    background:#ed9246;color: #bbbbbb; width:50px; height:25px; border-radius:4px; text-align:center;}
</style>
</head>

<body style="overflow-y:scroll">
<div class="demo0">
    <ul class="chaxundas">
    
    <li style=" width:20% !important"><p>车辆：</p><select><option>车辆选择</option><option>车辆选择</option></select>
    </li>
    <li><input type="button" value="数据查询" style=" background:#22abd4; color:#ffffff; text-align:center; padding:0;"></li>
	<li><input type="button" value="车辆回放" style=" background:#22abd4; color:#ffffff; text-align:center; padding:0;"></li>
	<li><input type="button" value="车辆跟踪" style=" background:#22abd4; color:#ffffff; text-align:center; padding:0;"></li>  
	<li style=" width:23% !important"><p>数据时间：<span>2016-12-07  15:15:00</span></p></li>
	<li style=" width:18% !important"><p>车辆状态：<span class="lixian">离线</span></p></li>
    </ul>
</div>



<div class="big4">
        	<div class="subnav1" style="width:100%; height:40px;    background: #063f4a;">
            	<li tt="teb01" class="active1"> 实时图表</li>
                <li tt="teb02">电池信息</li>
                <li tt="teb03">电机信息</li>
				<li tt="teb04">其他信息</li>
            </div>
            <div class="all">
                <div class="subnav-neirong1 teb01">
                	<select class="xiala"><option>参数选择</option><option>参数选择</option></select>
                    <div id="shishi" style="min-width:400px;height:300px"></div>
                </div>
				
                 <div class="subnav-neirong1 teb02" style="display:none;">
						<div id="er1" style="min-width:800px;height:300px"></div>
						<div id="er2" style="min-width:400px;height:300px"></div>
						<div id="er3" style="min-width:400px;height:300px;display:none"></div>
						<div id="er4" style="min-width:400px;height:300px;display:none"></div>
					
                    <!--内容行-->
        <div class="lie1">
        	<ul><li><p>车牌号：</p><span></span></li><li><p>电机冷却方式：</p><span></span></li><li><p>终端生产商：</p><span></span></li></ul>
            <ul><li><p>车架号：</p><span></span></li><li><p>额定电压：</p><span></span></li><li><p>终端编号：</p><span></span></li></ul>
            <ul><li><p>车辆类型：</p><span></span></li><li><p>最大工作电流： </p><span></span></li><li><p>终端生产日期：</p><span></span></li></ul>
            <ul><li><p>最高车速：</p><span></span></li><li><p>电机编号：</p><span></span></li><li><p>SIM 卡号：</p><span></span></li></ul>
            <ul><li><p>续航里程：</p><span></span></li><li><p>电机类型： </p><span></span></li><li><p>ICCID 号：</p><span></span></li></ul>
			<ul><li><p>车牌号：</p><span></span></li><li><p>电机冷却方式：</p><span></span></li><li><p>终端生产商：</p><span></span></li></ul>
            <ul><li><p>车架号：</p><span></span></li><li><p>额定电压：</p><span></span></li><li><p>终端编号：</p><span></span></li></ul>
            <ul><li><p>车辆类型：</p><span></span></li><li><p>最大工作电流： </p><span></span></li><li><p>终端生产日期：</p><span></span></li></ul>
            <ul><li><p>最高车速：</p><span></span></li><li><p>电机编号：</p><span></span></li><li><p>SIM 卡号：</p><span></span></li></ul>
            <ul><li><p>续航里程：</p><span></span></li><li><p>电机类型： </p><span></span></li><li><p>ICCID 号：</p><span></span></li></ul>
        </div>
                </div>
                 <div class="subnav-neirong1 teb03" style="display:none;">
                    <div class="lie1">
        	<ul><li><p>车牌号：</p><span></span></li><li><p>电机冷却方式：</p><span></span></li><li><p>终端生产商：</p><span></span></li></ul>
            <ul><li><p>车架号：</p><span></span></li><li><p>额定电压：</p><span></span></li><li><p>终端编号：</p><span></span></li></ul>
            <ul><li><p>车辆类型：</p><span></span></li><li><p>最大工作电流： </p><span></span></li><li><p>终端生产日期：</p><span></span></li></ul>
            <ul><li><p>最高车速：</p><span></span></li><li><p>电机编号：</p><span></span></li><li><p>SIM 卡号：</p><span></span></li></ul>
            <ul><li><p>续航里程：</p><span></span></li><li><p>电机类型： </p><span></span></li><li><p>ICCID 号：</p><span></span></li></ul>
			<ul><li><p>车牌号：</p><span></span></li><li><p>电机冷却方式：</p><span></span></li><li><p>终端生产商：</p><span></span></li></ul>
            <ul><li><p>车架号：</p><span></span></li><li><p>额定电压：</p><span></span></li><li><p>终端编号：</p><span></span></li></ul>
            <ul><li><p>车辆类型：</p><span></span></li><li><p>最大工作电流： </p><span></span></li><li><p>终端生产日期：</p><span></span></li></ul>
            <ul><li><p>最高车速：</p><span></span></li><li><p>电机编号：</p><span></span></li><li><p>SIM 卡号：</p><span></span></li></ul>
            <ul><li><p>续航里程：</p><span></span></li><li><p>电机类型： </p><span></span></li><li><p>ICCID 号：</p><span></span></li></ul>
        </div> 
                </div>
				<div class="subnav-neirong1 teb04" style="display:none;">
                    <div class="lie1">
        	<ul><li><p>车牌号：</p><span></span></li><li><p>电机冷却方式：</p><span></span></li><li><p>终端生产商：</p><span></span></li></ul>
            <ul><li><p>车架号：</p><span></span></li><li><p>额定电压：</p><span></span></li><li><p>终端编号：</p><span></span></li></ul>
            <ul><li><p>车辆类型：</p><span></span></li><li><p>最大工作电流： </p><span></span></li><li><p>终端生产日期：</p><span></span></li></ul>
            <ul><li><p>最高车速：</p><span></span></li><li><p>电机编号：</p><span></span></li><li><p>SIM 卡号：</p><span></span></li></ul>
            <ul><li><p>续航里程：</p><span></span></li><li><p>电机类型： </p><span></span></li><li><p>ICCID 号：</p><span></span></li></ul>
			<ul><li><p>车牌号：</p><span></span></li><li><p>电机冷却方式：</p><span></span></li><li><p>终端生产商：</p><span></span></li></ul>
            <ul><li><p>车架号：</p><span></span></li><li><p>额定电压：</p><span></span></li><li><p>终端编号：</p><span></span></li></ul>
            <ul><li><p>车辆类型：</p><span></span></li><li><p>最大工作电流： </p><span></span></li><li><p>终端生产日期：</p><span></span></li></ul>
            <ul><li><p>最高车速：</p><span></span></li><li><p>电机编号：</p><span></span></li><li><p>SIM 卡号：</p><span></span></li></ul>
            <ul><li><p>续航里程：</p><span></span></li><li><p>电机类型： </p><span></span></li><li><p>ICCID 号：</p><span></span></li></ul>
        </div> 
                </div>
            </div>
            <div style="clear:both"></div>
        </div>


        <script>
			$(document).ready(function(e) {
				$(".subnav1 li").click(function(){
			
					$(this).addClass("active1").siblings().removeClass("active1");
					
					var tt=$(this).attr("tt");
					$(this).parents(".subnav1").siblings(".all").children("."+tt).show().siblings().hide();
					
					});
			});

</script>

<script>
$(function () {
    $(document).ready(function () {
        Highcharts.setOptions({
            global: {
                useUTC: false
            }
        });
        $('#container').highcharts({
            chart: {
                type: 'spline',
                animation: Highcharts.svg, // don't animate in old IE
                marginRight: 10,
                events: {
                    load: function () {
                        // set up the updating of the chart each second
                        var series = this.series[0];
                        setInterval(function () {
                            var x = (new Date()).getTime(), // current time
                                y = Math.random();
                            series.addPoint([x, y], true, true);
                        }, 1000);
                    }
                }
            },
            title: {
                text: 'Live random data'
            },
            xAxis: {
                type: 'datetime',
                tickPixelInterval: 150
            },
            yAxis: {
                title: {
                    text: 'Value'
                },
                plotLines: [{
                    value: 0,
                    width: 1,
                    color: '#808080'
                }]
            },
            tooltip: {
                formatter: function () {
                    return '<b>' + this.series.name + '</b><br/>' +
                        Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
                        Highcharts.numberFormat(this.y, 2);
                }
            },
            legend: {
                enabled: false
            },
            exporting: {
                enabled: false
            },
            series: [{
                name: 'Random data',
                data: (function () {
                    // generate an array of random data
                    var data = [],
                        time = (new Date()).getTime(),
                        i;
                    for (i = -19; i <= 0; i += 1) {
                        data.push({
                            x: time + i * 1000,
                            y: Math.random()
                        });
                    }
                    return data;
                }())
            }]
        });
    });
});
</script>
<script type="text/javascript">

		Ext.onReady(function() {
			//车辆选择条件panel变量
		    var formPanel = Ext.create('Ext.form.Panel',{
		    	
        	});
			setRealtimeInfo = function(){
				Ext.Ajax.request({
					url:'../GetRegCurrentInfo3.web',
					method:'get',
					timeout:80000,
				 	params: {
		        		vin:vin
				    },
			     	success: function(response){
				    	/*
				    	 | 如果返回的JSON是无效的，decode方法返回null
				    	 */
  
				        /*
				         | 整车状态-左边数据
				         */
				        carload.machineLeft1_1Option.series[0].data[0].value = infoHash.getValue('电池电压');
				        carload.machineLeft1_1Chart.setOption(carload.machineLeft1_1Option,true);
				        
				        carload.machineLeft2_1Option.series[0].data[0].value = infoHash.getValue('电池电流');
				        carload.machineLeft2_1Chart.setOption(carload.machineLeft2_1Option,true);
				        
				        SOCControl(infoHash.getValue('SOC'));
				        $('#machineSOC').html(infoHash.getValue('SOC'));
				        $('#machineDisc').html(infoHash.getValue('预驶里程'));
				        
				        /*
				         | 整车状态-中间数据-上部分
				         */
				        speedControl(infoHash.getValue('车速'));
				       	$('#machineODO').html(parseInt(infoHash.getValue('总里程')));
				        $('#machineTrip').html(parseInt(infoHash.getValue('本次里程')));
				        readyControl(infoHash.getValue('ready'));
				        gearControl(infoHash.getValue('档位'));
				        
				        /*
				         | 整车状态-中间数据-下部分
				         */
						$('#machineAccelerate').html(infoHash.getValue('加速踏板'));
				        $('#machineBrake').html(infoHash.getValue('制动踏板'));
				        $('#machineErrorCode').html(infoHash.getValue('故障代码'));
				        statueIconControl(
				        	infoHash.getValue('整车系统故障码'),
				        	infoHash.getValue('电池故障码'),
				        	infoHash.getValue('电机故障码'),
				        	infoHash.getValue('充电状态'),
				        	infoHash.getValue('行驶状态'),
				        	infoHash.getValue('充电链接状态'),
				        	data.status//infoHash.getValue('钥匙信号状态')
				        );
				       
				        /*
				         | 整车状态-右边仪表盘数据
				         */
				        carload.machineRight1_1Option.series[0].data[0].value = infoHash.getValue('电机温度');
				        carload.machineRight1_1Chart.setOption(carload.machineRight1_1Option,true);

				        carload.machineRight2_1Option.series[0].data[0].value = infoHash.getValue('电机控制器温度');
				        carload.machineRight2_1Chart.setOption(carload.machineRight2_1Option,true);
				        
				        carload.machineRight1_2Option.series[0].data[0].value = (parseFloat(infoHash.getValue('电机转速'))/1000).toFixed(2);
				        carload.machineRight1_2Chart.setOption(carload.machineRight1_2Option,true);
				        
				        carload.machineRight2_2Option.series[0].data[0].value = infoHash.getValue('电机功率');
				        carload.machineRight2_2Chart.setOption(carload.machineRight2_2Option,true);
				        
				        carload.machineRight1_3Option.series[0].data[0].value = infoHash.getValue('电机电压');
				        carload.machineRight1_3Chart.setOption(carload.machineRight1_3Option,true);
				        
				        carload.machineRight2_3Option.series[0].data[0].value = infoHash.getValue('电机电流');
				        carload.machineRight2_3Chart.setOption(carload.machineRight2_3Option,true);
				        
				        
				        
				    },
				    failure:function(){
			    	 	Ext.getCmp('loading').hide();
			    	 	//Ext.Msg.alert('提示','请求失败，请检测网络是否正常……');
				    }
				});
			};
	var tabPanel = Ext.create('Ext.tab.Panel',{
		        activeTab: 0,
		        plain: true,
		        id:'chart',
		        deferredRender:false,
		        region:'center',
		        defaults :{
		            autoScroll: true
		        },
		        
		        items: [{
	        		
	        		
	        		items:[{
	        			xtype:'panel',
	        			layout:'column',
	        			border:false,
	        			items:[{
	        				id:'machineLeftDashboard',
	        				bodyStyle:'border-width:0 1px 1px 0;border-color:#B1B8BD;',
	        				layout:'column',
	        				columnWidth: 0.4,
	        				height:300,
	        				defaults:{
	        					border:false
	        				},
	        				items:[{
	        					columnWidth: 1,
	        					height:300,
	        					items:[{
	        						id:'machineLeft1_1',//1_1代表左边1行1列,即表示左边的仪表盘1行1列的位置
	        						height:150
	        					},{
	        						xtype:'panel',
	        						id:'machineLeft2_1',
	        						height:150
	        					}]
	        				},{
	        					width:130,
	        					height:300,
	        					//machineLeft_right代表左边仪表盘的右边部分（电池）
	        					html:'<div class="machineLeft_right">' +
			        					'<ul><li><div class="machineBattery"><span class="battZIndex3"></span><span class="battZIndex2" id="machineBatteryControl"></span><span class="battZIndex1"></span></div></li>' +
			        					'<li><div class="machineSOCDiv"><span>SOC：</span><span id="machineSOC">0</span><span> %</span></div></li>' +
			        					'<li><div class="machineDiscDiv"><span><img src="../yibiao/images/disc.png" title="预驶里程"/></span><span>：</span><span id="machineDisc">0</span><span> km</span></div></li>' +
		        					'</ul></div>'
	        				}]
	        			},{   //中间数据
	        				id:'machineCenterDashboard',
	        				width:470,
	        				bodyStyle:'border-width:0 0 1px 0;border-color:#B1B8BD;',
	        				height:300,
	        				html:'<div class="machineCenter">' +
	        						'<div class="machineCenter_top">' +
		        						'<div class="machineCenter_top_top">'+
		        							'<div class="machineSpeed">' +
		        								'<span class="machineImage">' +
		        									'<i><img src="../yibiao/images/0.png"/></i>' +
		        									'<i><img src="../yibiao/images/0.png"/></i>' +
		        									'<i><img src="../yibiao/images/0.png"/></i>' +
	        									'</span>' +
	        									'<span class="speedUnit"><b>km/h</b></span>' +
	       									'</div>' +
	       									'<div class="machineReady"><img src="../yibiao/images/ready_2.png"/></div>'+
	       								'</div>'+
	       								'<div class="machineCenter_top_bottom">' +
	       									'<span class="machineMileage"><ul>' +
	       										'<li><span>总里程(ODO)：</span><span id="machineODO" class="odoSpanWidth">0000</span><span class="odoSpanWidth1">　km</span></li>' +
	       										'<li><span  class="odoSpanWidth2">本次里程(Trip)：</span><span id="machineTrip" class="machineSpanWidth">0000</span><span>　km</span></li></ul>' +
       										'</span>' +
	       									'<span id="machineGear"><img src="../yibiao/images/R.png"/></span>'+
       									'</div>'+
       								'</div>'+
       								'<div class="machineCenter_bottom">' +
       									'<div class="machineCenter_bottom_top"><ul>' +
       										'<li class="machineAcc"><span>加速踏板：</span><span id="machineAccelerate" class="machineSpanWidth">0</span></li>' +
       										'<li class="machineBra"><span>制动踏板：</span><span id="machineBrake" class="machineSpanWidth">0</span></li>' +
       										'<li class="machineErr"><span>故障数：</span><span id="machineErrorCode" class="machineSpanWidth">0</span></li>' +
     									'</div>' +
       									'<div class="machineCenter_bottom_bottom">' +
       										'<span><img src="../yibiao/images/err_no_act.png"/></span>' +
       										'<span><img src="../yibiao/images/battery_err_no_act.png"/></span>' +
       										'<span><img src="../yibiao/images/electric_err_no_act.png"/></span>' +
       										'<span><img src="../yibiao/images/charging_no_act.png"/></span>' +
       										'<span><img src="../yibiao/images/brake_no_act.png"/></span>' +
       										'<span><img src="../yibiao/images/chargingLine_no_act.png"/></span>' +
       										'<span><img src="../yibiao/images/keyStatue_no_act.png"/></span>' +
       									'</div>' +
       								'</div>' +
	        					'</div>'
	        			},{
	        				id:'machineRightDashboard',
	        				columnWidth: 0.6,
	        				layout:'column',
	        				bodyStyle:'border-width:0 0 1px 1px;border-color:#B1B8BD;',
	        				height:300,
	        				defaults:{
	        					border:false
	        				},
	        				items:[{
	        					columnWidth: 0.33,
	        					height:300,
	        					items:[{
	        						id:'machineRight1_1',
	        						height:150
	        					},{
	        						id:'machineRight2_1',
	        						height:150
	        					}]
	        				},{
	        					xtype:'panel',
	        					columnWidth: 0.34,
	        					height:300,
	        					items:[{
	        						id:'machineRight1_2',
	        						height:150
	        					},{
	        						id:'machineRight2_2',
	        						height:150
	        					}]
	        				},{
	        					xtype:'panel',
	        					columnWidth: 0.33,
	        					height:300,
	        					items:[{
	        						id:'machineRight1_3',
	        						height:150
	        					},{
	        						id:'machineRight2_3',
	        						height:150
	        					}]
	        				}]
	        			}]
	        		},]
	        	},]
	    	});
			
			//解决页面切换图表没有自适应的问题
			tabPanel.on('tabchange',function(){
				carload.resizeAll();
				carBattery.resizeAll();
			});
			
			/*
			 *页面整体布局
			 */ 
		    Ext.create('Ext.container.Viewport', {
			    layout: 'border',
			    id:'view',
			    minWidth:1150,
			    minHeight:300,
			    autoScroll:'auto',
			    overflowX:'auto',
			    overflowY:'hidden',
			    items:[formPanel,tabPanel]
			});
			//初始化
		    (function(){
   		 		var docWidth = Ext.getBody().getWidth() - 20;
				setDivWidth(['battery','batteryVol','batteryBoxTemp','batteryBoxVoltage_0'],docWidth); 		 		
   		 		carload.init();
   		 		carBattery.init();
   		 	})();
		});
		
		//调整图表渲染div的宽度和高度,需要设置宽高，或者无法显示图表。
	    function setDivWidth(ids,t){
			for(var i = 0,length = ids.length;i < length; i++){
				$('#'+ids[i]).width(t);
			}
		};

		//自定义车辆选择方法
		function getVehicleData(items){
			Ext.getCmp('selectedRegs').setValue(items[1]);
			vin = items[0];
			//清除定时器
			if(interval){
				clearInterval(interval);
			}
			//重置车速折线图
			chesuArr = [];
			carload.setMachineLine(null,true);
			//重置图表
			carload.init();
  		 	carBattery.init();
			//显示遮罩
			mask.show();
			//清除电池状态图表
			removeBatteryInfos();
			//清除注册信息列表
			removeRegisterInfos();
			setRealtimeInfo();
			interval = setInterval(setRealtimeInfo,2000);
		};
		function removeBatteryInfos(){
			var battPanel = Ext.getCmp('batteryVol'),
				num = battPanel.items.length;
			for(var i =1;i < num;i++){
				battPanel.remove('batteryBoxVoltage_'+i)
			}
		}
	  	//新建tab子项的方法
		function createTab(parentTab, tabId, tabTitle, tabUrl) { 
			var	newTab = parentTab.add({
				id:tabId,
				title : tabTitle,
				closable : true,
				layout : "fit",
				html : '<iframe scrolling="auto" border="0" frameborder="0" width="100%" height="100%" src="'+ tabUrl +'"></iframe>'
			});
			parentTab.setActiveTab(newTab);
		};
		
		//设置仪表盘SOC
	 	function SOCControl(value){
			if(value == ''){
				value = 0;
			}
			if(value <0 || value>100 || value == '')
				return;
			else{
				//计算需要遮盖的高度
				var height = 175 - (value/100)*160;
				$('#machineBatteryControl').css('height',height);
			}
		 };
		 
		//设置仪表盘车速
	 	function speedControl(value){
			if(value == '' || value == null){
				value = 0;
			}else{
				value = parseFloat(value);
			}
			var hundreds,tens,ones;
			if(value < 0 || value > 999){
				return;
			}else{
				var hundreds = value%100>0?value/100:0;
				var tens = value/10>0?value/100:0;
				if(value < 10){
					hundreds = 0;
					tens = 0;
					ones = parseInt(value);
				}else if(value < 100){
					hundreds = 0;
					tens = parseInt(value/10);
					ones = parseInt(value - tens * 10);
				}else{
					hundreds = parseInt(value/100);
					tens = parseInt((value - hundreds * 100)/10);
					ones = parseInt(value - hundreds * 100 - tens * 10);
				}
				var imgs =  $('.machineImage img');
				imgs[0].src = 'images/'+hundreds+'.png';
				imgs[1].src = 'images/'+tens+'.png';
				imgs[2].src = 'images/'+ones+'.png';
			}
	 	};
	 	
	 	//设置速度折线图
	 	function speedChartControl(chesu,status){
	        if(chesu == ''){
	        	chesu = 0;
	        }
	        if(chesuArr.length <= 0){
				chesuArr = [];
				for(var i = 0; i < 15; i++){
					chesuArr.push(chesu);
				}
				carload.setMachineLine(chesuArr,false);
			}
	        if(status=='在线'){
       	 		var lastData = chesu,
					axisData = (new Date()).toLocaleTimeString().replace(/^\D*/,'');
				for(var i = 0;i < 14;i++){
					chesuArr[i] = chesuArr[i+1];
				}
				chesuArr[14] = chesu;
				carload.machineLineChart.addData([
					[
			            0,        // 系列索引
			            lastData, // 新增数据
			            false,    // 新增数据是否从队列头部插入
			            false,    // 是否增加队列长度，false则自定删除原有数据，队头插入删队尾，队尾插入删队头
			            axisData  // 坐标轴标签
			        ]
			    ]);
	        }
	 	};
	 	
	 	//设置单体电压和温度
	 	function setBatteryChart(){
	 		var regexp_v = /^(\d+_)?\d+#单体电压$/,
	        	regexp_t = /^(\d+_)?\d+#(电池)?单体温度$/,
	       		keys = infoHash.getKeys(),
	        	batVoltageHash = new HashTable(),
	        	batTempHash = new HashTable();
	        for(var j = 0;j< keys.length;j++){
	        	if(regexp_v.test(keys[j])){
	        		batVoltageHash.add(keys[j],infoHash.getValue(keys[j]));
	        	}
	        	if(regexp_t.test(keys[j])){
	        		batTempHash.add(keys[j],infoHash.getValue(keys[j]));
	        	}
	        }
	        //对单体电压key值进行排序
	        var sortVolKeys = sortKeys(batVoltageHash.getKeys());
	        //不同类型单体电压的处理方法
	        if(batVoltageHash.getSize() > 0){
		        if(sortVolKeys.join(',').indexOf('_') >= 0){
		     		//单体电压形式为“?_?#单体电压”，根据不同电池包对sortVolKeys进行划分
		     		var divideVolKeys = divideKeys(sortVolKeys);
		     		//初始化单体电压图表panel
		     		if(!isBatteryPanelInited('batteryVol')){
		     			initBatteryPanel(divideVolKeys);
		     			if(divideTempKeys[0] == undefined && !Ext.getCmp('batteryBoxVoltage_0').isHidden()){
		     				Ext.getCmp('batteryBoxVoltage_0').hide();
		     			}
		     		}
		     		for(var t in divideVolKeys){
		     			var valueArr = [],
		     				nameArr = divideVolKeys[t];
		     			for(var z = 0;z < nameArr.length;z++){
		     				valueArr.push(batVoltageHash.getValue(nameArr[z]));
		     			}
		     			setEchartValue('batteryBoxVoltage_'+t,nameArr,valueArr);
		     		}
		        }else{
		        	//单体电压形式为“?#单体电压”
	       	        var nameArr = sortVolKeys,
	       	        	valueArr = [];
		        	for(var t = 0;t < sortVolKeys.length;t++){
		        		valueArr.push(batVoltageHash.getValue(sortVolKeys[t]));
		        	}
		        	setEchartValue('batteryBoxVoltage_0',nameArr,valueArr);	       
		        }
	        }
	        
	        
          	//对单体温度key值进行排序
	        var sortTempKeys = sortKeys(batTempHash.getKeys())
	        //单体温度
	        if(batTempHash.getSize() > 0){
				if(sortTempKeys.join(',').indexOf('_') >= 0){
		     		//单体温度形式为“?_?#单体温度”，根据不同电池包对sortTempKeys进行划分
		     		var divideTempKeys = divideKeys(sortTempKeys);
		     		//初始化单体温度图表panel
		     		if(!isBatteryPanelInited('batteryTemp')){
		     			initBatteryTempPanel(divideTempKeys);
		     			if(divideTempKeys[0] == undefined && !Ext.getCmp('batteryBoxTemp_0').isHidden()){
		     				Ext.getCmp('batteryBoxTemp_0').hide();
		     			}
		     		}
		     		for(var t in divideTempKeys){
		     			var valueArr = [],
		     				nameArr = divideTempKeys[t];
		     			for(var z = 0;z < nameArr.length;z++){
		     				valueArr.push(batTempHash.getValue(nameArr[z]));
		     			}
		     			setEchartValue('batteryBoxTemp_'+t,nameArr,valueArr);
		     		}
		        }else{
		        	//单体温度形式为“?#温度电压”
	       	        var nameArr = sortTempKeys,
	       	        	valueArr = [];
		        	for(var t = 0;t < sortTempKeys.length;t++){
		        		valueArr.push(batVoltageHash.getValue(sortTempKeys[t]));
		        	}
		        	setEchartValue('batteryBoxTemp_0',nameArr,valueArr);	       
		        }
	        }
	 	};
	 	
	 	//初始化单体电压图表
	 	function initBatteryPanel(keyGroups){
	 		addEchartPanel(keyGroups.length-1,'batteryVol','batteryBoxVoltage_');
     		for(var t = 1;t < keyGroups.length;t++){
     			carBattery.setBatteryBox('batteryBoxVoltage_'+t,t+'号单体蓄电池包电压值','V');
    		}
	 	};
	 	
	 	//初始化单体温度图表
	 	function initBatteryTempPanel(keyGroups){
	 		addEchartPanel(keyGroups.length-1,'batteryTemp','batteryBoxTemp_');
     		for(var t = 1;t < keyGroups.length;t++){
     			carBattery.setBatteryBox('batteryBoxTemp_'+t,t+'号动力蓄电池包温度值','V');
    		}
	 	};
	 	//电池状态是否初始化
	 	function isBatteryPanelInited(id){
	 		var num = Ext.getCmp(id).items.length;
	 		if(num > 1){
	 			return true;
	 		}else{
	 			return false;
	 		}
	 	};
	 	
	 	//设置ready状态
		function readyControl(status){
			var img = $('.machineReady img');
	 		if(status){
				img[0].src = 'images/ready_2.png';
			}else{
				img[0].src = 'images/ready_1.png';
			}
	 	};
	 	
	 	//设置档位
	 	function gearControl(gear){
	 		var img = $('#machineGear img');
			if(gear == '' || img == null) return;
	        if(gear.indexOf('L')>-1){
	        	img[0].src = 'images/L.png';
	        }else if(gear.indexOf('D')>-1){
	        	img[0].src = 'images/D.png';
	        }else if(gear.indexOf('N')>-1||gear.indexOf('空')>-1){
	        	img[0].src = 'images/N.png';
	        }else if(gear.indexOf('R')>-1||gear.indexOf('倒')>-1){
	        	img[0].src = 'images/R.png';
	        }else if(gear.indexOf('P')>-1||gear.indexOf('停车')>-1||gear.indexOf('B')>-1){
	        	img[0].src = 'images/P.png';
	        }else{
	        	return;
	        }
	 	};
	 	
	 	//设置图标信息
		function statueIconControl(zhengche,dianchi,dianji,chongdian,zhuche,chongdianlianjie,yaoshi){
			var imags = $('.machineCenter_bottom_bottom img');
			//钥匙信号状态
			if(yaoshi == '在线'){
				setIconStatus(imags[6],'images/keyStatue_act.png','钥匙状态：on');
			}else{
				setIconStatus(imags[6],'images/keyStatue_no_act.png','钥匙状态：LOCK');
			}
			//充电链接状态
			if(chongdianlianjie){
				setIconStatus(imags[5],'images/chargingLine_act.png','充放电状态：充电中');
			}else{
				setIconStatus(imags[5],'images/chargingLine_no_act.png','充放电状态：无');
			}
			//驻车状态
			if(zhuche){
				setIconStatus(imags[4],'images/brake_act.png','驻车状态：制动');
			}else{
				setIconStatus(imags[4],'images/brake_no_act.png','驻车状态：无');
			}
			//充电状态
			if(chongdian){
				setIconStatus(imags[3],'images/charging_act.png','充电提醒：低于电量阈值，需充电');
			}else{
				setIconStatus(imags[3],'images/charging_no_act.png','充电提醒：无');
			}
			//电机故障
			if(!checkErrorCode(dianji)){
				setIconStatus(imags[2],'images/electric_err_act.png','电机故障：'+dianji);
			}else{
				setIconStatus(imags[2],'images/electric_err_no_act.png','电机故障：无');
			}
			//电池故障
			if(!checkErrorCode(dianchi)){
				setIconStatus(imags[1],'images/battery_err_act.png','电池故障：'+dianchi);
			}else{
				setIconStatus(imags[1],'images/battery_err_no_act.png','电池故障：无');
			}
			//系统故障
			if(!checkErrorCode(zhengche)){
				setIconStatus(imags[0],'images/err_act.png','系统故障：'+zhengche);
			}else{
				setIconStatus(imags[0],'images/err_no_act.png','系统故障：无');
			}
		};
		
		//检测故障内容
		function checkErrorCode(value){
			if(value == '0.0' 
				|| value == '0' 
				|| value == "正常" 
				|| value == "均衡" 
				|| value == "合格"
				|| value == "运行" 
				|| value == "normal"
				|| value == "无故障" 
				|| value == "电池正常"
				|| value == "断开"){
				return true;
			}else{
				return false;
			}
		}
		
		//设置图标状态
		function setIconStatus(obj,src,title){
			obj.src = src;
			obj.title = title;
		};
		
		// 电池状态表格数据的填入
		function setBatteryInfo(infos){
			var tds = $('.batteryItem table td');
			for(var i = 0,length = infos.length;i<length;i++){
				tds[i].innerHTML = infos[i];
			}
		};
		
		//移除注册信息
		function removeRegisterInfos(){
			Ext.getCmp('registerInfos').removeAll();			
		};
		
		//初始化注册信息
		function initRegisterInfos(titles,infos){
			var panel,
				registerInfosPanel = Ext.getCmp('registerInfos');
			/*
			 | 如果原本的注册信息与新注册信息数量不一致，移除注册信息
			 */
			if(registerInfosPanel.items.length != titles.length){
				removeRegisterInfos();
			}
			if(registerInfosPanel.items.length > 0){
				var t = registerInfosPanel.items.items,
					paramsJson = infoHash;
				for(var i = 0,length = t.length;i < length;i++){
					var t1 = t[i].items.items;
					for(var j = 0,len = t1.length;j < len;j++){
						if(paramsJson.getValue(t1[j].fieldLabel) != t1[j].getValue()){
							t1[j].setRawValue(paramsJson.getValue(t1[j].fieldLabel));
						}
					}
				}
			}else{
				for(var i = 0,length = titles.length;i < length;i++){
					panel = createFormPanel(titles[i],infos[i]);
					Ext.getCmp('registerInfos').add(panel);
				}
			}
		};
		
		//生成注册信息panel
		function createFormPanel(title,info){
			var panel = Ext.create('Ext.form.Panel',{
               	anchor:'90%',
               	style:'margin:15 auto',
               	title:title,
               	layout:'column',
               	defaults:{
               		margin:'0 5 0 0',
             		labelAlign:'right',
              		labelWidth:200
               	},
               	items:[]
			});
			for(var i = 0,length = info.length;i<length;i++){
				for(var ele in info[i]){
					panel.add({
              		 	xtype: 'displayfield',
			        	fieldLabel: ele,
			        	width:300,
			        	margin:'0 20 0 0',
			        	border:true,
			        	value: info[i][ele]
               		});
				}
			}
			return panel;
		};
		
		//生成信息Hash表
		function setInfoHash(data){
			infoHash.clear();
			if(data.length > 0){
				for(var i = 0,length = data.length;i < length;i++){
					for(var j in data[i]){
						for(var k = 0,len = data[i][j].length;k < len;k++){
							for(var e in data[i][j][k]){
								infoHash.add(e,data[i][j][k][e]);
							}
						}
					}
				}
			}
		};
		
		//定义HashTatle方法
		function HashTable() {
		    var size = 0;
		    var entry = new Object();
		    this.add = function (key, value) {
		        if (!this.containsKey(key)) {
		            size++;
		        }
		        entry[key] = value;
		    }
		    this.getValue = function (key) {
		        return this.containsKey(key) ? entry[key] : 0;
		    }
		    this.remove = function (key) {
		        if (this.containsKey(key) && (delete entry[key])) {
		            size--;
		        }
		    }
		    this.containsKey = function (key) {
		        return (key in entry);
		    }
		    this.containsValue = function (value) {
		        for (var prop in entry) {
		            if (entry[prop] == value) {
		                return true;
		            }
		        }
		        return false;
		    }
		    this.getValues = function () {
		        var values = new Array();
		        for (var prop in entry) {
		            values.push(entry[prop]);
		        }
		        return values;
		    }
		    this.getKeys = function () {
		        var keys = new Array();
		        for (var prop in entry) {
		            keys.push(prop);
		        }
		        return keys;
		    }
		    this.getSize = function () {
		        return size;
		    }
		    this.clear = function () {
		        size = 0;
		        entry = new Object();
		    }
		};
		
		//单体序号排序
		function sortKeys(keys){
 			if(typeof(keys) == 'object' && keys.length > 0){
				return keys.sort(sortby);
 			}
 		};
 		
 		//单体顺序大小比较
 		function sortby(a,b){
 			var aValue = getValueFromStr(a),
 				bValue = getValueFromStr(b);
 			if(aValue[0] > bValue[0]){
 				return 1;
 			}else if(aValue[0] < bValue[0]){
 				return -1;
 			}else{
 				if(aValue[1] > bValue[1]){
 					return 1;
 				}else if(aValue[1] < bValue[1]){
 					return -1;
 				}else{
 					return 0;
 				}
 			}
 		};
 		
 		//从字符串提取符合正则的信息
 		function getValueFromStr(str){
 			var regx = /^\d+(_\d+)?/,
 				value = str.match(regx)[0],
 				arr = value.split('_');
 			for(var i = 0,length = arr.length;i < length;i++){
 				arr[i] = parseInt(arr[i]);
 			}
 			return arr;
 		};
 		
 		//将电池包划分为多组
 		function divideKeys(keys){
 			var regx = /^\d+/,
 				group = [];
 			for(var i = 0,len = keys.length;i < len;i++){
 				group[keys[i].match(regx)] = [];
 			}
 			for(var j = 0,length = keys.length;j < length;j++){
 				group[keys[j].match(regx)].push(keys[j]);
 			}
 			return group;
 		};
 		
 		//设置echart图表的值
 		function setEchartValue(id,nameArr,valueArr){
        	carBattery[id+'Option'].series[0].data = valueArr;
       	 	carBattery[id+'Option'].xAxis[0].data = nameArr;
        	carBattery[id+'Chart'].setOption(carBattery[id+'Option'],true); 			
 		};
 		
		//增加电池包显示图表panel
		function addEchartPanel(num,parentId,childId){
			if(num > 0){
				var parentPanel = Ext.getCmp(parentId),
					tab = Ext.getCmp('chart'),
					childPanel;
				var tabId = tab.getActiveTab().getId();
				tab.setActiveTab(1);
				for(var i = 1;i <= num;i++){
					childPanel = Ext.create('Ext.panel.Panel',{
						border:false,
						id:childId+i,
						height:400,
						anchor:'100%'
	                });
					parentPanel.add(childPanel);
				}
				tab.setActiveTab(tabId);
			}
		};
	</script>
    
    <script>
$(function(){
	
	/*$(".left-nav").height($(window).height()-94);
	$(".jiantou").height($(window).height()-94);
	$(".right-content").height($(window).height()-104);
	$(".panel-body-noborder").height($(window).height()-104);
	$("body").height($(window).height()-80);*/
});
</script>
</body>
</html>
